<template>
  <div class="table-wrapper">
    <a-table
      :dataSource="dataSource"
      :columns="columns"
      :pagination="pagination"
      :row-selection="{
        selectedRowKeys: selectedRowKeys,
        onChange: onSelectChange,
      }"
      bordered
    >
      <template #bodyCell="{ column, text, record }">
        <template v-if="column.dataIndex === 'dataTitle'">
          <a @click="onOpenDrawer(record)">{{ text }}</a>
        </template>
        <template v-if="column.card?.controls?.dataFormat">
          {{ FormatCardValue(column.card, text) }}
        </template>
      </template>
    </a-table>
  </div>
</template>

<script lang="ts">
import { defineComponent, computed, ref } from 'vue';
import { useStore } from 'vuex';
import { FormatCardValue } from '@/global/util/common';
import FormDataDrawer from '@/views/formHome/components/homeArea/DataDrawer.vue';

export default defineComponent({
  name: 'TableWrapper',
  components: {
    FormDataDrawer,
  },
  props: {
    card: {
      type: Object as any,
      default: () => ({}),
    },
    formProperty: {
      type: Object as any,
      default: () => ({}),
    },
    columns: {
      type: Array as any,
      default: () => [],
    },
  },
  setup(props, context) {
    const store = useStore();
    const dataSource = computed(() => {
      const resource = store.state.formHome.dataSource;
      const dataTitleList = props.formProperty?.dataTitle?.defaultValue ?? [];
      const list = resource?.map((it: any) => {
        const ret: any = {};
        // 拼接key、数据标题
        const dataTitle = dataTitleList
          .map((key: string) => it.data[key] ?? '')
          .join(' ');
        Object.assign(ret, { key: it.bizObjectId, dataTitle, ...it.data });
        // props.columns.forEach((it: any) => {
        //   if (it.card?.controls?.dataFormat) {
        //     ret[it.card.cardCode] = FormatCardValue(
        //       it.card,
        //       ret[it.card.cardCode],
        //     );
        //   }
        // });
        return ret;
      });
      return list;
    });
    const pagination = {
      defaultPageSize: 10,
      responsive: true,
      showQuickJumper: true,
      showSizeChanger: true,
      pageSizeOptions: ['10', '20', '50', '100'],
      showTotal: (total: number) => `共${total}条`,
    };
    const selectedRowKeys = computed({
      get: () => store.state.formHome.selectedRowKeys,
      set: (val) => store.commit('formHome/SetSelectedRowKeys', val),
    });
    const onSelectChange = (selectedKeys: string[], selectedRows: any) => {
      selectedRowKeys.value = selectedKeys;
    };
    const onOpenDrawer = (record: any) => {
      context.emit('onOpenDrawer', 'read', record);
    };

    return {
      dataSource,
      pagination,
      selectedRowKeys,
      onSelectChange,
      onOpenDrawer,
      FormatCardValue,
    };
  },
});
</script>

<style lang="less" scoped>
.table-wrapper {
  position: relative;
  height: calc(100% - 52px);
  padding: 0 32px;
  :deep .ant-table-wrapper {
    height: 100%;
    .ant-spin-nested-loading,
    .ant-spin-container {
      height: 100%;
    }
    .ant-table {
      height: calc(100% - 64px);
      .ant-table-thead {
        & > tr > th {
          padding: 8px 16px;
          font-weight: 600;
          background-color: @rb-body-background;
        }
      }
      .ant-table-tbody {
        & > tr > td {
          padding: 5px 16px;
        }
      }
    }
    .ant-pagination {
      margin: 0;
      padding: 16px 0;
    }
  }
}
</style>
